/**
* 星空背景 Css
*/
@function getShadows($n) {
  $shadows: "#{random(100)}vw #{random(100)}vh #fff";

  @for $i from 2 through $n {
    $shadows: "#{$shadows}, #{random(100)}vw #{random(100)}vh #fff";
  }

  @return unquote($shadows);
}

$duration: 800s;
$starCount: 500;

@for $i from 1 through 3 {
  $duration: calc($duration / 2);
  $starCount: floor(calc($starCount / 2));
  .layer#{$i} {
    $size: #{$i}px;
    position: fixed;
    width: $size;
    height: $size;
    border-radius: 50%;
    background: #f00;
    left: 0;
    top: 0;
    box-shadow: getShadows($starCount);
    animation: move $duration linear infinite;
    &::after {
      //after是为了实现无限移动，底部多加复制一屏
      content: "";
      position: fixed;
      left: 0;
      top: 100vh;
      width: $size;
      height: $size;
      border-radius: inherit;
      box-shadow: inherit;
    }
  }
}

@keyframes move {
  100% {
    transform: translateY(-100vh);
  }
}